<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>CSS3 渐变</title>
    <script src="./prefixfree.js"></script>
	<style>
		html,
		body {
			height: 100%;
		}
		
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
			/*制作背景渐变效果*/
			/*	background-image: linear-gradient(
				to bottom,
				#f8fcd4 20%,
				#dbfacb 100%
			);*/
		}
		
		.nav {
			width: 800px;
			text-align: center;
			padding-top: 50px;
			margin: 0 auto;
		}
		/*设置按钮基本样式*/
		
		.nav a {
			display: inline-block;
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			font-size: 14px;
			color: #fff;
			text-decoration: none;
			border: 1px solid #e59500;
			background-color: #FFB700;
			background-image: linear-gradient( to bottom, #FFB700 0%, #FF8C00 100%);
		}
		/*制作橙色按钮悬停效果*/
		
		.nav a:hover {
			background-color: #FFCB48;
			background: linear-gradient( to bottom, #FFCB48 0%, green 100%);
		}
		.progress {
			width: 400px;
			height: 40px;
			margin: 100px auto;
			border-radius: 5px;
			background-color: green;
			background-image: linear-gradient( 135deg, yellow 25%, transparent 25%, transparent 50%, yellow 50%, yellow 75%, transparent 75%, transparent 100%);
			background-size: 40px 40px;
		}
		.radial-gradient {
			width: 200px;
			height: 200px;
			margin: 40px auto;
			border-radius: 100px;
			background-color: blue;
			background-image: radial-gradient( 200px at 50px 60px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
		}
	</style>
</head>

<body>
	<div class="nav">
		<a href="javascript:;">refresh</a>
		<a href="javascript:;">shuffle</a>
		<a href="javascript:;">preview</a>
		<a href="javascript:;">tea</a>
		<a href="javascript:;">wifi</a>
		<a href="javascript:;">locator</a>
	</div>
	<div class="radial-gradient"></div>
	<div class="progress"></div>
</body>

</html>